<template>
  <img @click="flag = !flag" alt="Vue logo" src="./assets/logo.png" />
  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
  <!-- <Demo v-if="flag"/> -->
  <!-- <hr> -->
  <!-- <Ref/> -->
  <hr>
  <!-- <CompositonApi v-if="flag"/> -->
  <hr>
  <!-- <WatchEffect/> -->
  <hr>
  <set-up/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Demo from './components/demo.vue'
import Ref from './components/ref.vue'
import CompositonApi from './components/CompositionApi.vue'
import WatchEffect from './components/WatchEffect.vue'
import SetUp from './components/SetUp.vue'
export default{
  name:'App',
  data() {
    return {
      flag: true,
    }
  },
  components: {
    Demo,
    Ref,
    CompositonApi,
    WatchEffect,
    SetUp
  }
}

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
